<template>
	<view class="Lu-bdphone">
		<view class="Lu-bdphone-header">
			<text class="iconfont icon-fanhui Lu-bdphone-headericon" @click="navback"></text>
			<text class="Lu-bdphone-headertit">绑定手机</text>
		</view>
		<view v-if="userInfo.mobile == ''">
			<view class="Lu-bdphone-body">
				<view class="clearfix Lu-bdphone-bodyphone">
					<text class="iconfont icon-bdphone fl Lu-bdphone-bodyphoneicon"></text>
					<input type="number" class="fl Lu-bdphone-bodyphoneinp" v-model="phone" placeholder="请输入手机号">
				</view>
				<view class="clearfix Lu-bdphone-bodycode">
					<text class="iconfont icon-bdphoneyz fl Lu-bdphone-bodycodeicon"></text>
					<input type="number" class="fl Lu-bdphone-bodycodeinp"  v-model="code" placeholder="验证码">
					<span v-show="sendAuthCode" class="auth_text auth_text_blue fr"  @click="getAuthCode">获取验证码</span>
					<span v-show="!sendAuthCode" class="auth_text fr"><span class="auth_text_blue">{{auth_time}} </span> 秒后重新发送</span>
				</view>
			</view>
			<view class="Lu-bdphone-footer" :class="{ 'Lu-bdphone-footerbd':code != ''}" @click="bdphone">
				绑定
			</view>
		</view>
		<view v-else>
			您已经绑定过手机号
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl','pid'])
		},
		data() {
			return {
				sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
				auth_time: 0, /*倒计时 计数器*/
				phone:'',
				code:''
			}
		},
		methods:{
			navback(){
				uni.navigateBack({
					delta:1
				})
			},
			 getAuthCode:function () {
				this.sendAuthCode = false;
				this.auth_time = 60;
				var auth_timetimer =  setInterval(()=>{
					this.auth_time--;
					if(this.auth_time<=0){
						this.sendAuthCode = true;
						clearInterval(auth_timetimer);
					}
				}, 1000);
				uni.request({
					url:this.apiUrl+ 'api/post_sms',
					data:{
						phone:this.phone,
						type:1
					},
					method:'POST',
					success: (res) => {
						console.log(res.data)
						if(res.data.status == 200){
							
						}else{
							uni.showModal({
								title:res.data.msg,
								content:res.data.msg
							})
						}
					}
				})
			},
			bdphone(){
				if(this.code != ''){
					uni.request({
						url:this.apiUrl+ 'api/binding_phone',
						data:{
							phone:this.phone,
							code:this.code,
							type:1
						},
						header:{
							openid:this.openId
						},
						method:'POST',
						success: (res) => {
							uni.showModal({
								title:res.data.msg,
								content:res.data.msg
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.Lu-bdphone{
		padding: 40rpx 30rpx;
		.Lu-bdphone-header{
			margin: 20rpx 0;
			.Lu-bdphone-headericon{
				font-size: 32rpx;
				color: #333333;
			}
			.Lu-bdphone-headertit{
				font-size: 30rpx;
				color: #333333;
				margin-left: 16rpx;
			}
		}
		.Lu-bdphone-body{
			margin-left: 16rpx;
			.Lu-bdphone-bodyphone{
				margin: 20rpx 0;
				padding: 26rpx 6rpx;
				border-bottom: 2rpx solid #dcdcdc;
				.Lu-bdphone-bodyphoneicon{
					font-size: 48rpx;
					color: #666666;
				}
				.Lu-bdphone-bodyphoneinp{
					margin-left: 24rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.Lu-bdphone-bodycode{
				margin: 20rpx 0;
				padding: 26rpx 6rpx;
				border-bottom: 2rpx solid #dcdcdc;
				.Lu-bdphone-bodycodeicon{
					font-size: 48rpx;
					color: #666666;
				}
				.Lu-bdphone-bodycodeinp{
					margin-left: 24rpx;
					font-size: 32rpx;
					color: #333333;
				}
				.auth_text{
					font-size: 32rpx;
					color: #999999;
				}
			}
		}
		.Lu-bdphone-footer{
			width: 660rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #cfd5e3;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 60rpx;
		}
		.Lu-bdphone-footerbd{
			background-color: #3e87fe;
		}
	}
</style>
